<!-- subpkg_consult/description/index.vue -->
<script lang="ts" setup>
import { postUploadFileAPI } from '@/apis/common';
import { useUserConsultStore, type IllnessInfoType } from '@/stores/consult';
import { useCounterStore } from '@/stores/counter';
import type { PostPatientConsultOrderParams } from '@/types/consult';
import { ref } from 'vue';

// 定义表单
const formData = ref<IllnessInfoType>({
  illnessDesc: '',// 病情描述
  illnessTime: 1,// 患病时间 1 一周内 2 一个月内 3 半年内 4 半年以上
  consultFlag:0,//是否就诊 0 未就诊 1 就诊过
  pictures: [] ,//图片列表
})
// 患病时长，需要根据点击事件来获取数据
const illnessTimes = ref([
    { value: 1, text: '一周内' },
    { value: 2, text: '一月内' },
    { value: 3, text: '半年内' },
    { value: 4, text: '半年以上' },
]);
// 是否就诊
const consultFlags = [
  { value: 0, text: '未就诊' },
  { value: 1, text: '就诊过' },
]
// 选择文件后触发 上传图片
const handleSelect = async (e:UniHelper.UniFilePickerOnSelectEvent)=>{
  const res = await postUploadFileAPI(e.tempFilePaths[0])
  formData.value.pictures?.push(res.data)
}
// 删除图片
const handleDelete = (event: UniHelper.UniFilePickerOnDeleteEvent) => {
  // 根据索引删除图片
  formData.value.pictures?.splice(event.index, 1)
}
// 获取store数据
const store = useUserConsultStore()
if(store.illnessInfo.illnessDesc){
  uni.showModal({
    title:'提示',
    content:'是否恢复之前的问诊记录？',
    confirmText:'是',
    confirmColor:'#16C2A3',
    cancelColor:'#848484',
    success:(res)=>{
      // 点击是 回显之前数据
      if(res.confirm){
        formData.value = store.illnessInfo
      }
    },
  })
}
// 下一步操作
const props = defineProps<{
  depId:string
  type:string
  illnessType:string
}>()
const handleNextStep = ()=>{
  // 保存病情描述
  store.illnessInfo = formData.value
  // 保存页面参数到store中 问诊类型 医院类型 科室id
  store.illnessType = props.illnessType
  store.depId = props.depId
  store.type = props.type
  // 跳转至患者列表
  uni.navigateTo({ url: '/subpkg_archive/pages/list/list?type=consult'})
}
</script>

<template>
  <scroll-page>
    <view class="description-page">
      <!-- 在线医生 -->
      <view class="doctor-online">
        <image
          src="/static/uploads/doctor-avatar-2.png"
          class="doctor-avatar"
        />
        <view class="doctor-info">
          <view class="name">在线医生</view>
          <view class="message">
            请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
          </view>
          <view class="tips">
            <text class="iconfont icon-shield"></text>
            内容仅医生可见
          </view>
        </view>
      </view>
      <!-- 患者信息 -->
      <view class="patient-info">
        <view class="description">
          <uni-easyinput
            type="textarea"
            :input-border="false"
            placeholder-style="font-size: 30rpx; color: #979797"
            placeholder="请详细描述您的病情,病情描述不能为空"
            v-model="formData.illnessDesc"
          />
        </view>

        <view class="title">本次患病多久了？</view>
        <view class="tags">
          <text class="tag "
            v-for="item in illnessTimes" :key="item.value"
            :class="{ active: formData.illnessTime === item.value }"
            @click="formData.illnessTime = item.value"
          >{{item.text}}</text>
        </view>

        <view class="title">此次病情是否去医院就诊过？</view>
        <view class="tags">
          <text
            v-for="item in consultFlags"
            :key="item.value"
            class="tag"
            :class="{ active: formData.consultFlag === item.value }"
            @click="formData.consultFlag = item.value"
          >
            {{ item.text }}
          </text>
        </view>
      </view>
      <!-- 上传图片 -->
      <view class="patient-picture">
        <uni-file-picker
        v-model="formData.pictures"
          title="上传病情相关图片 (仅医生可见)"
          limit="8"
          :image-styles="{ width: '160rpx', height: '160rpx' }"
          file-extname="png,jpg,gif,webp"
          :auto-upload="false"
          @select="handleSelect"
          @delete="handleDelete"
        />
      </view>
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <button class="uni-button"
      @click="handleNextStep"
      :disabled="formData.illnessDesc.trim()===''"
      >下一步</button>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  @import './index.scss';
</style>